<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        * { padding:0; margin:0;}
        .all {
            width:360px;
            height:625px;
            margin-top:100px;
            margin-left:100px;
        }

        /* 扇叶 */
        .main {
            width:350px;
            height:350px;
            border:5px solid green;
            border-radius:350px;
            background:radial-gradient(#fff,green);
            position:relative;
            z-index:1;
        }
        .main span {
            width:80px;
            height:80px;
            background:green;
            position:absolute;
            left:135px;
            top:135px;
            border-radius:80px;
            z-index:1;
        }
        .main div {
            width:30px;
            height:150px;
            border-radius: 50% 50%;
            background:green;
            border:1px solid green;
            box-sizing:border-box;
            display: inline-block;
        }
        .main div:nth-child(1){
            margin-left:161px;
            margin-top:14px;
        }
        .main div:nth-child(2){
            -webkit-transform: rotate(120deg);
            -moz-transform: rotate(120deg);
            -ms-transform: rotate(120deg);
            -o-transform: rotate(120deg);
            transform: rotate(120deg);
            transform-origin: 0 100%;
        }
        .main div:nth-child(3){
            -webkit-transform: rotate(240deg);
            -moz-transform: rotate(240deg);
            -ms-transform: rotate(240deg);
            -o-transform: rotate(240deg);
            transform: rotate(240deg);
            transform-origin: -50% 117%;
        }

        /* 按钮 */
        .box {
            width:80px;
            height:200px;
            border:5px solid green;
            margin-left:140px;
            box-sizing:border-box;
            top:-10px;
            background:radial-gradient(#fff,green);
            position:relative;
        }
        .box .btn:nth-child(1){
            margin-top:30px;
        }
        .box .btn {
            margin-top:10px;
            margin-left:20px;
            width:20px;
            height:20px;
            border-radius:10px;
            position:relative;
        }
        .box .btn input[type="radio"]{
            width:20px;
            height:20px;
            position:absolute;
            top:0;
            left:0;
            opacity:0;
            cursor:pointer;
        }
        .box .btn span {
            background:green;
            color:#fff;
            text-align:center;
            display:block;
            width:20px;
            height:20px;
            line-height:20px;
            border-radius:20px;
            font-size:12px;
        }
        .box .btn input[type="radio"]:checked + span {
            background:red;
        }

        /* 底盘 */
        .footer {
            width:360px;
            height:100px;
            border-radius:50% 50%;
            border:5px solid green;
            box-sizing:border-box;
            background:radial-gradient(#fff , green);
            margin-top:-55px;
        }

        /* 动画效果 */
        @keyframes rotate360{
            0% {}
            100% {transform:rotate(360deg);}
        }
        .animate-rotate360-0{}
        .animate-rotate360-1{
            animation:rotate360 .4s linear infinite both;
        }
        .animate-rotate360-2{
            animation:rotate360 .3s linear infinite both;
        }
        .animate-rotate360-3{
            animation:rotate360 .2s linear infinite both;
        }
    </style>

    <script>
        window.onload = function(){
            var input = document.getElementsByTagName('input');
            var main = document.getElementsByClassName('main')[0];
            for(var i=0;i<input.length;i++){
                input[i].addEventListener('click',function(){
                    var num = parseInt(this.parentNode.getElementsByTagName('span')[0].innerHTML);
                    main.className = 'main animate-rotate360-'+num;
                },false);
            }
        }
    </script>
</head>
<body>
    <div class="all">
        <!-- 扇叶 -->
        <div class="main">
            <!-- 扇叶 -->
            <div></div>
            <div></div>
            <div></div>
            <!-- 轴心 -->
            <span></span>
        </div>

        <!-- 按钮 -->
        <div class="box">
            <div class="btn">
                <input type="radio" name="radio_1">
                <span>1</span>
            </div>
            <div class="btn">
                <input type="radio" name="radio_1">
                <span>2</span>
            </div>
            <div class="btn">
                <input type="radio" name="radio_1">
                <span>3</span>
            </div>
            <div class="btn">
                <input type="radio" checked name="radio_1">
                <span>0</span>
            </div>
        </div>

        <!-- 底盘 -->
        <div class="footer">

        </div>
    </div>
</body>
</html>